<template>
  <div>
    <div class="back_all">
      <div class="login_box">
        <div class="login_title">"防灾天目"应急指挥平台</div>
        <div class="user">
          <img src="../assets/用户.png" alt="" />
          <input type="text" placeholder="请输入账号" />
        </div>
        <div class="pass">
          <img src="../assets/密码.png" alt="" />
          <input type="text" placeholder="请输入密码" />
        </div>
        <div class="token">
          <img src="../assets/验证码.png" alt="" />
          <input type="text" value="" placeholder="请输入验证码" />
          <img src="http://3d.kuxia.top/assets/rex.da9a5f16.png" alt="" />
        </div>
        <div class="login_btn">
          <button @click="logins">登陆</button>
        </div>
        <!-- <iframe
          src="http://3d.kuxia.top/jquery3d/"
          frameborder="0"
          class="iframe"
        ></iframe> -->
      </div>
    </div>
  </div>
</template>
 
<script>
import router from "@/router";
export default {
  setup() {
    let logins = () => {
      router.push({
        path: "/Index",
      });
    };
    return {
      logins,
    };
  },
};
</script>
 
<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: left;
  box-sizing: border-box;
}

.back_all {
  width: 100vw;
  height: 100vh;
  background: url("http://3d.kuxia.top/assets/bj.f748973f.png");
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100%;
}
.login_box {
  width: 45.4rem;
  height: 32.65rem;
  background: url("http://3d.kuxia.top/assets/bj2.c53a1ea1.png");
  background-size: 100%;
  padding: 7.8rem 7.2rem 5.5rem;
}
.login_title {
  width: 23.5rem;
  margin: 0 auto;
  height: 2rem;
  font-size: 30px;
  font-family: PangMenZhengDao;
  font-weight: 400;
  color: #fff;
  text-align: center;
  line-height: 1.5rem;
  margin-top: 3%;
}
.user {
  width: 80%;
  height: 70px;
  margin-left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user input {
  width: 60%;
  height: 30px;
  border: none;
  border: 2px solid rgb(82, 180, 255);
  border-radius: 4px;
  background: rgba(82, 180, 255, 0.2);
  padding-left: 10px;
  margin-left: 5%;
}
.login_box input::placeholder {
  color: rgb(82, 180, 255);
}
.login_box img {
  width: 34px;
  height: 34px;
}
.pass {
  width: 80%;
  height: 70px;
  margin-left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pass input {
  width: 60%;
  height: 30px;
  border: none;
  border: 2px solid rgb(82, 180, 255);
  border-radius: 4px;
  background: rgba(82, 180, 255, 0.2);
  padding-left: 10px;
  margin-left: 5%;
}
.token {
  width: 80%;
  height: 70px;
  margin-left: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.token input {
  width: 35%;
  height: 30px;
  border: none;
  border: 2px solid rgb(82, 180, 255);
  border-radius: 4px;
  background: rgba(82, 180, 255, 0.2);
  padding-left: 10px;
  margin-left: 5%;
}
.token > img:last-child {
  margin-left: 5%;
  width: 90px;
}
.iframe {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.login_btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login_btn button {
  width: 60%;
  height: 40px;
  border-radius: 5px;
  text-align: center;
  font-weight: 500;
  color: #fff;
  background-color: rgb(4, 95, 194);
  border: 1px solid rgb(82, 180, 255);
}
</style>